<template>
  <div class="left-scpjsj">
    <div class="mask-detail">
      <div @click="close" class="close" v-if="!isHall" />
        <div class="top-content">
        <div>绿色资质</div>
        </div>
        <div class="img-content">
        <a-carousel :dots="false" autoplay :autoplaySpeed='5000'> 
          <div class="carousel-content" v-for="(list, index) in changeImgList" :key="index">
              <img v-for="(img,index2) in list" :key="index2" class="top-img" :src="img" :alt="index2" />
          </div>
        </a-carousel>
      </div>
    </div>
  </div>
</template>
<script>
import {queryAgriculturalActivitiesImgdp} from '@/api/dashboards'
export default {
    props:{
        isHall:{
            type:Number
        }
    },
  data(){
    return{
        show:false,
        imgList:[
          // 'tqpp/pipa_1645005160093.jpeg',
          // 'tqpp/temp/%E6%9E%87%E6%9D%B7_1645082610308.jpeg',
          // 'tqpp/temp/pp2_1645082618351.jpeg',
          // 'tqpp/pipa_1645005160093.jpeg',
          // 'tqpp/pipa_1645005160093.jpeg',
        ],
        imgList1:[],
        changeImgList:[],
    }
  },
   watch: {
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
  },
  created(){
     
  },
  computed: {
  },
  mounted() {
    this.queryAgriculturalActivitiesImgdp()
  },
  methods: {
     async queryAgriculturalActivitiesImgdp() {
        let res = await queryAgriculturalActivitiesImgdp()
        this.imgList = res.result&&res.result.imgUrls&&res.result.imgUrls.split(',')
        this.imgList1 = this.imgList.map(item=>{
          return `${window._CONFIG['domainName']}/${item}`
        })
        var chunk = 4; //每4个分一组
        for (var i = 0, j = this.imgList1.length; i < j; i += chunk) {
            this.changeImgList.push(this.imgList1.slice(i, i + chunk));
        }
    },
    close(){
        this.$emit('closeMask', false)
     },
  },
}
</script>
<style lang="less" scoped>
.left-scpjsj {
  width: 360px;
  height: 262px;
  color: #fff;
 .mask-detail{
        width: 360px;
        height: 270px;
        // background: rgba(11, 17, 51, 0.85);
        position: relative;
        // top: -100%;
        // left: 105%;
        z-index: 1000;
         .close{
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: url('../../assets/close.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 12px;
            top: 12px;
        }
        .top-content{
            display: flex;
            align-items: center;
            padding: 24px 10px 0 24px;
        }
        .img-content{
          width: 360px;
             height: 206px;
          .carousel-content{
            display: unset !important;
            padding:24px 24px;
            overflow: hidden;
            display: flex !important;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 100%;
            margin: 0 !important;
            img{
              width: 150px;
              height: 85px !important;
              margin-bottom: 13px;
              object-fit: cover;
           }
          }
        
        }
    }
}
</style>